import React, { useState } from 'react';

const ChineseQuestion = ({ question, onAnswer, onNext }) => {
  const [answer, setAnswer] = useState('');
  const [isCorrect, setIsCorrect] = useState(null);
  const [showExplanation, setShowExplanation] = useState(false);
  const [message, setMessage] = useState('');
  const [usedHint, setUsedHint] = useState(false);

  const checkAnswer = () => {
    const userAnswer = answer.trim();
    const isAnswerCorrect = question.correctAnswers.some(
      correct => correct.toLowerCase() === userAnswer.toLowerCase()
    );

    setIsCorrect(isAnswerCorrect);

    if (isAnswerCorrect) {
      setMessage('正确！🎉');
      onAnswer(true, userAnswer, usedHint);
    } else {
      setMessage('不正确，请重试。');
      onAnswer(false, userAnswer, usedHint);
    }
  };

  const handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      checkAnswer();
    }
  };

  const resetQuestion = () => {
    setAnswer('');
    setIsCorrect(null);
    setShowExplanation(false);
    setMessage('');
    setUsedHint(false);
  };

  return (
    <div className="card">
      <h2>根据中文意思猜日语单词</h2>
      
      <div className="chinese-text">
        <strong>中文：</strong>{question.chinese}
      </div>

      <div style={{ margin: '20px 0' }}>
        <input
          type="text"
          className={`input-field ${isCorrect === true ? 'correct' : isCorrect === false ? 'incorrect' : ''}`}
          value={answer}
          onChange={(e) => setAnswer(e.target.value)}
          onKeyPress={handleKeyPress}
          placeholder="请输入对应的日语单词（假名或汉字）"
          disabled={isCorrect === true}
        />
      </div>

      <div style={{ textAlign: 'center', margin: '10px 0' }}>
        {message && (
          <div className={isCorrect ? 'correct' : 'incorrect'} style={{ padding: '10px', borderRadius: '5px' }}>
            {message}
          </div>
        )}
      </div>

      <div style={{ textAlign: 'center', margin: '20px 0' }}>
        {!isCorrect && (
          <button className="btn" onClick={checkAnswer}>
            提交答案
          </button>
        )}
        
        {isCorrect && (
          <button className="btn" onClick={() => setShowExplanation(!showExplanation)}>
            {showExplanation ? '隐藏解析' : '查看解析'}
          </button>
        )}
        
        {isCorrect && (
          <button className="btn" onClick={() => { resetQuestion(); onNext(); }}>
            下一题
          </button>
        )}
      </div>

      {showExplanation && (
        <div className="card" style={{ marginTop: '20px', backgroundColor: '#f8f9fa' }}>
          <h3>详细解析</h3>
          <p><strong>正确答案：</strong>{question.explanation.word}</p>
          <p><strong>词性：</strong>{question.explanation.partOfSpeech}</p>
          <p><strong>中文意思：</strong>{question.explanation.meaning}</p>
          <p><strong>例句：</strong>{question.explanation.example}</p>
          <p><strong>翻译：</strong>{question.explanation.translation}</p>
          {question.explanation.commonMistakes && (
            <p><strong>常见错误：</strong>{question.explanation.commonMistakes}</p>
          )}
        </div>
      )}
    </div>
  );
};

export default ChineseQuestion; 